<template>
  <Popup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="1000"
    :height="800"
    :max-height="'95vh'"
    @hidden="hidden"
    title="编辑规格"
    @isReady="isReady"
    ref="popup"
    class="hidden"
  >
    <div class="right-top">
      <p class="fl_left" >
        <span v-for="(item, k) in drugInfoDetail" :key="k">{{item}}</span>
      </p>
    </div>
    <!-- v-model="activeName"  @tab-click="handleClick" -->
    <el-tabs type="card">
      <el-tab-pane label="规格信息" style="height: 550px">
        <DxScrollView width="100%" height="100%">
          <DxForm
            id="form"
            label-location="left"
            :form-data="specificationModel"
            :col-count="2"
          >
            <!-- :form-data="employee" -->
            <DxGroupItem>
              <DxGroupItem caption="规格编码信息" :col-count="8">
                <DxSimpleItem data-field="specificationId" :col-span="8" disabled="true">
                  <DxLabel text="规格编码" />
                </DxSimpleItem>
                <DxSimpleItem data-field="name" :col-span="5">
                  <DxLabel text="规格名称" />
                </DxSimpleItem>
                <DxSimpleItem
                  :col-span="3"
                  data-field="isPreparedMedical"
                  editorType="dxCheckBox"
                  :editor-options="{ text: '非常备药品' }"
                >
                  <DxLabel :showColon="false" text=" " />
                </DxSimpleItem>
              </DxGroupItem>
              <DxGroupItem caption="规格单位信息" :col-count="2">
                <DxSimpleItem
                  data-field="selling"
                  :editor-options="editOptions"
                >
                  <DxLabel text="售价单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="sellingNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="pharmacy"
                  :editor-options="editOptions"
                >
                  <DxLabel text="药房单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="pharmacyNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>

                <DxSimpleItem
                  data-field="medicineLibrary"
                  :editor-options="editOptions"
                >
                  <DxLabel text="药库单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="medicineLibraryNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem data-field="delivery">
                  <DxLabel text="送货单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="deliveryNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="claimUnit"
                  :editor-options="claimUnitListOptions"
                  editor-type="dxSelectBox"
                >
                  <DxLabel text="申领单位" />
                </DxSimpleItem>
                <DxSimpleItem disabled="true">
                  <DxTextBox v-model:value="claimUnitByOthers" />
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="specificationAndForm"
                  editorType="dxSelectBox"
                  :editor-options="drugSpecificationSpecificationAndFormOptions"
                >
                  <DxLabel text="规格形态" />
                </DxSimpleItem>
              </DxGroupItem>

              <DxGroupItem :col-count="8">
                <DxSimpleItem data-field="" :col-span="8">
                  <div>
                    <el-alert
                      title="饮片、免煎剂均不可以分零使用"
                      type="warning"
                      :closable="false"
                    />
                  </div>
                </DxSimpleItem>
                <DxSimpleItem :col-span="2">
                  <DxLabel text="发药类型" />
                </DxSimpleItem>
                <DxSimpleItem :col-span="2">
                  <DxLabel text="门诊" />
                  <DxCheckBox v-model:value="isOutpatient" />
                </DxSimpleItem>
                <DxSimpleItem  :col-span="2">
                  <DxLabel text="住院" />
                  <DxCheckBox v-model:value="isBeHospitalized" />
                </DxSimpleItem >
                <DxSimpleItem :col-span="2">
                  <DxLabel text="体检" />
                  <DxCheckBox v-model:value="isPhysicalExamination" />
                </DxSimpleItem>
              </DxGroupItem>
            </DxGroupItem>

            <DxGroupItem :visible="false">
              <DxSimpleItem
                data-field=""
                disabled="true"
              >
              <DxLabel text="指定供应商" />
              </DxSimpleItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem
                  data-field=""
                  disabled="true"
                  :editor-options="tagSetting"
                >
                  <DxLabel text="产地" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field=""
                  disabled="true"
                  :editor-options="tagSetting"
                >
                  <DxLabel text="厂牌" />
                </DxSimpleItem>
              </DxGroupItem>

              <DxSimpleItem
                data-field=""
                :editor-options="{
                  stylingMode: 'outlined',
                  disabled: true,
                }"
              >
                <DxLabel text="商品名称" />
              </DxSimpleItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem
                  data-field=""
                  :editor-options="
                    getSimpleSuffix('拼音', {
                      disabled: true,
                    })
                  "
                >
                  <DxLabel text="药品简码" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field=""
                  :editor-options="
                    getSimpleSuffix('五笔', {
                      disabled: true,
                    })
                  "
                >
                </DxSimpleItem>
              </DxGroupItem>
              <DxSimpleItem data-field="" :editor-options="editOptions" disabled="true">
                <DxLabel text="注册商标" />
              </DxSimpleItem>
              <DxSimpleItem data-field="" :editor-options="editOptions" disabled="true">
                <DxLabel text="批准文号" />
              </DxSimpleItem>
              <DxSimpleItem
                data-field=""
                :editor-options="tagSetting"
                disabled="true"
              >
                <DxLabel text="合同单位" />
              </DxSimpleItem>
              <DxSimpleItem data-field="" :editor-options="editOptions" disabled="true">
                <DxLabel text="主标识码" />
              </DxSimpleItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem data-field="" :editor-options="editOptions" disabled="true">
                  <DxLabel text="标识子码" />
                </DxSimpleItem>
                <DxSimpleItem data-field="" :editor-options="editOptions" disabled="true">
                  <DxLabel text="备用编码" />
                </DxSimpleItem>
              </DxGroupItem>
            </DxGroupItem>
            <DxGroupItem caption="指定厂牌信息" :disabled="true">
              <DxSimpleItem
                data-field=""
                :editor-options="{
                  text: '无指定厂牌信息，请在药品厂牌厂商管理中设置',
                  readOlny: true,
                }"
              >
              </DxSimpleItem>
            </DxGroupItem>
          </DxForm>
        </DxScrollView>
      </el-tab-pane>
      <el-tab-pane label="价格及使用" style="height: 550px">
        <CreateDrugPriseZh
          v-model:value="specificationPriceModel"
          :dictionaryList="dictionaryList"
        ></CreateDrugPriseZh>
      </el-tab-pane>
    </el-tabs>

    <div class="lb-form-button-right">
      <DxButton
        text="取消"
        styling-mode="text"
        type="default"
        @click="hidden()"
      />

      <DxButton
        text="保存并继续添加"
        styling-mode="text"
        type="default"
        @click="save(0)"
      />

      <DxButton
        text="保存并退出"
        styling-mode="text"
        type="default"
        @click="save(1)"
      />
      <!-- @click="save" -->
    </div>
  </Popup>
</template>

<script lang="ts">
import Popup from "@/framework/components/popup/popup.vue";
import DxTextBox from "devextreme-vue/text-box";
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxTabbedItem,
  DxTabPanelOptions,
  DxTab,
  DxRequiredRule,
  DxLabel,
} from "devextreme-vue/form";
import {
  DictionaryItemModel,
  SpecificationClient,
  SpecificationModel,
  SpecificationPriceModel,
} from "@/api/api_specificationclient";
import {
  Vue,
  Options,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import {
  DrugSpecificationMedicineType,
  DrugSpecificationSpecificationAndForm,
} from "@/config/field-const-name";
import { ApiTool } from "@/api/api-tool";
import DxTagBox from "devextreme-vue/tag-box";
import DxCheckBox from "devextreme-vue/check-box";
import { DxSelectBox } from "devextreme-vue/select-box";
import { ElAlert, ElTabs, ElTabPane, ElButton, ElIcon } from "element-plus";
import { DxScrollView } from "devextreme-vue/scroll-view";
import { DxColumn, DxDataGrid, DxEditing } from "devextreme-vue/data-grid";
import DataSource from "devextreme/data/data_source";
import DxButton from "devextreme-vue/button";
import CreateDrugPriseZh from "./create-drug-prisezh.vue";
import DrugSkuData from "@/data-source/drug-sku";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import notify from "devextreme/ui/notify";
import { DrugClient } from "@/api/api_drugclient";
import DrugData from "@/data-source/drug";
import {OutPutDrugInfo} from "@/api/api_dictionaryclient";
@Options({
  components: {
    Popup,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxTabbedItem,
    DxTabPanelOptions,
    DxTab,
    DxRequiredRule,
    DxLabel,
    DxTagBox,
    DxCheckBox,
    DxScrollView,
    DxColumn,
    DxDataGrid,
    DxEditing,
    DxButton,
    ElAlert,
    CreateDrugPriseZh,
    DxSelectBox,
    ElTabs,
    ElTabPane,
    ElButton,
    ElIcon,
    DxTextBox,
  },
})
export default class extends Vue {
  @Prop({ type: Boolean, default: false })
  value!: boolean;
  @Emit("success")
  addSuccess() {}
  @Prop({ type: String, default: false })
  drugSortId!: string
  @Prop({ type: String, default: false })
  drugSchemeId!: string
  editOptions = {
    stylingMode: "outlined",
  };
  specificationModel: SpecificationModel = {
    name: "",
    selling: "",
    sellingNumber: 0,
    medicineLibrary: "",
    medicineLibraryNumber: 0,
    delivery: "",
    deliveryNumber: 0,
    claimUnit: 0,
    drugId: "",
    pharmacy: "",
    pharmacyNumber: 0,
  };

  specificationPriceModel: SpecificationPriceModel = {
    /** 药品属性*/
    attributes: "",
    /** 指导差率 */
    guideDifference: 0,
    /** 成本价格 */
    costPrice: 0,
    /** 加成率 */
    markupRate: 0,
    /** 采购扣率 */
    purchaseDeductionRate: 0,
    /** 当前售价 */
    currentSellingPrice: 0,
    /** 管理费比例 */
    managementFeeRatio: 0,
    /** 结算价 */
    settlementPrice: 0,
    /** 费别折扣(设置药品参不参与费用模块的打折计算) */
    feeDiscount: "",
    /** 增值税率 */
    vatRate: 0,
    /** 指导售价 */
    guidePrice: 0,
    /** 收入项目 */
    incomeItem: "",
    /** 药价级别 */
    drugPriceLevel: "",
    /** 病案费用 */
    medicalRecordCost: "",
    /** 医保类型 */
    drugInsurance: "",
    /** 服务对象 */
    serviceObject: "",
    /** 门诊分零 */
    zeroOutpatient: "",
    /** 住院分零 */
    beHospitalizedDivideZero: "",
  };
  specificationModelOld = Object.assign({}, this.specificationModel);
  specificationPriceModelOld = Object.assign({}, this.specificationPriceModel);
  get drugId() {
    return (this.$route.query.drugId || "") as string;
  }
  getSimpleSuffix(
    text: string,
    extendOptions: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    let options: dxSelectBoxOptions = {
      stylingMode: "outlined",
      buttons: [
        {
          name: "unit",
          location: "after",
          options: {
            text: text,
            stylingMode: "text",
          },
        },
      ],
    };
    return Object.assign({}, options, extendOptions);
  }

  tagSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    //showSelectionControls: true,
    searchEnabled: true,
    searchExpr: "value",
    showDropDownButton: true,
  };
  isReady () {
    this.specificationModel = Object.assign({}, this.specificationModelOld);
    this.specificationPriceModel = Object.assign({}, this.specificationPriceModelOld);
    this.getDrugDetail()
  }
  getTagSetting(
    items: any[],
    displayExp: any,
    valueExpr: any
  ): dxSelectBoxOptions {
    return {
      ...this.tagSetting,
      items: items || [],
      displayExpr: displayExp || "displayValue",
      valueExpr: valueExpr || "dictionaryId",
    };
  }
  isOutpatient: any = false;
  isBeHospitalized: any = false;
  isPhysicalExamination: any = false;
  medicineType = [];
  // {value: '', searchEnabled: true, items: positions}
  get claimUnitListOptions() {
    return this.getTagSetting(
      [
        {
          name: "售价单位",
          id: 0,
        },
        {
          name: "药房单位",
          id: 5,
        },
        {
          name: "药库单位",
          id: 3,
        },
        {
          name: "送货单位",
          id: 4,
        },
      ],
      "name",
      "id"
    );
  }

  get drugSpecificationSpecificationAndFormOptions() {
    return this.getTagSetting(
      this.dictionaryList.drugSpecificationSpecificationAndForm,
      "",
      ""
    );
  }
  popupVisible = this.value || false;

  dataSource = [];
  @Inject()
  apiTool: ApiTool;
  popup: Popup;
  drugClient: DrugClient;
  created() {
    let client = this.apiTool.createClient(SpecificationClient);
    this.listData = new DrugSkuData(client, this);
  }
  dictionaryList: DictionaryItemModel = {};
  @Watch("value")
  watchValue() {
    this.popupVisible = this.value;
  }
  
  claimUnitByOthers = 0;
  @Watch("specificationModel.claimUnit")
  watchclaimUnitByOthers() {
    switch (this.specificationModel.claimUnit) {
      case 0:
        this.claimUnitByOthers = this.specificationModel.sellingNumber;
        break;
      case 3:
        this.claimUnitByOthers = this.specificationModel.medicineLibraryNumber;
        break;
      case 4:
        this.claimUnitByOthers = this.specificationModel.deliveryNumber;
        break;
      case 5:
        this.claimUnitByOthers = this.specificationModel.pharmacyNumber;
        break;
    }
    console.log(this.claimUnitByOthers);
  }
  titleInfo = {}
  @Watch("popupVisible")
  getDetail(newVal) {
    if (!newVal) {
      return;
    }
    let client = this.apiTool.createClient(SpecificationClient);
    client.getSpecificationInfo(this.drugId).then((res) => {
      let data: any = res.data;
      this.dictionaryList = data.dictionaryList;
      console.log('res.data',res.data);
      //console.log(res.data);
      // this.dictionaryList.drugSpecificationMedicineType =
      //   data.specificationModel.medicineTypeList;
      // drugSpecificationMedicineType =
      //   this.dictionaryList.drugSpecificationMedicineType;
      // console.log(this.dictionaryList.drugSpecificationMedicineType);
      data.dictionaryList = undefined;
      this.specificationModel = data;
    });
    let drugClient = this.apiTool.createClient(DrugClient);
    this.drugData = new DrugData(drugClient, this);
    this.getDrugDetail()
  }
  // 
  drugInfoDetail={
    name: "",
    coding:"",
    dosage:"",
    dosageUnit: "" 
  }
  drugData: DrugData;
  drugDetail: OutPutDrugInfo = {};
  async getDrugDetail() {
    let aa = await this.drugData.info(this.drugId, this.drugSchemeId).then(res =>{
      this.drugInfoDetail.name = '药品名称：' + res.name
      this.drugInfoDetail.coding ='当前药品编码：' + res.coding
      this.drugInfoDetail.dosage = '剂型：'+ res.dosage
      this.drugInfoDetail.dosageUnit = '剂量单位：'+res.dosageUnit + ' g'
    })
  }

  hidden() {
    this.popupVisible = false;
    this.$emit("update:value", this.popupVisible);
  }
  listData: DrugSkuData;
  
  save(saveType) {
    this.specificationModel.drugId = this.drugId;
    this.isOutpatient = this.isOutpatient ? 1 : 0;
    this.isBeHospitalized = this.isBeHospitalized ? 1 : 0;
    this.isPhysicalExamination = this.isPhysicalExamination ? 1 : 0;
    this.medicineType.push(
      this.isOutpatient,
      this.isBeHospitalized,
      this.isPhysicalExamination
    );
    this.specificationModel.medicineType = this.medicineType;
    this.medicineType = [];
    let params = {
      specificationModel: this.specificationModel,
      specificationPriceModel: this.specificationPriceModel,
    };
    console.log("params", params);
    this.isOutpatient = false;
    this.isBeHospitalized = false;
    this.isPhysicalExamination = false;
    this.listData.add(params).then((res) => {
      if (res) {
        this.addSuccess();
        if (!saveType) {
          this.isReady();
        } else {
          this.hidden();
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 56px;
  padding: 15px;
  .title-content {
    display: flex;
    justify-content: space-between;

    .title-operation {
      display: flex;
      justify-content: space-between;
    }
  }
}
.right-top {
  position: absolute;
  right: 42px;
  top: 15px;
  .fl_left {
    height: 20px;
    width: 480px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    span {
      margin-left: 10px;
    }
  }
}

</style>
